<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const driverDetail = ref('')
const driverArchives = ref('')
const driverSkill = ref('')

const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
const visible4 = ref(false)
const visible5 = ref(false)
const visible6 = ref(false)
const dialogTableVisible = ref(false)
const showIntro1 = ref(false);
const showIntro2 = ref(false);

import { driverDetailListService, driverArchivesListServer, driverSkillListServer } from '@/api/driver.js'
//获取驾驶员详细数据
const driverDetailList = async () => {
    let params = {
        id: route.params.id
    }
    let result = await driverDetailListService(params);
    driverDetail.value = result.data
}
driverDetailList()

// 获取驾驶员档案
const driverArchiveslList = async () => {
    let params = {
        id: route.params.id
    }
    let result = await driverArchivesListServer(params);
    driverArchives.value = result.data
    driverArchives.value.basics = driverArchives.value.basics.replace(/\n/g, '<br>')
    driverArchives.value.advancedf = driverArchives.value.advancedf.replace(/\n/g, '<br>')
    driverArchives.value.advanceds = driverArchives.value.advanceds.replace(/\n/g, '<br>')
    driverArchives.value.advancedt = driverArchives.value.advancedt.replace(/\n/g, '<br>')

}
driverArchiveslList()

// 获取驾驶员技能
const driverSkillList = async () => {
    let params = {
        id: route.params.id
    }
    let result = await driverSkillListServer(params);
    driverSkill.value = result.data
    console.log(driverSkill);

}
driverSkillList()


</script>

<template>
    <div class="box">
        <!-- 图片+个人信息 -->
        <div class="container">
            <!-- 驾驶员卡片 -->
            <div class="card">
                <el-card style="max-width: 280px;background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;border: 0px;"
                    class="card">
                    <div style="color: #fff;font-weight: 800;font-size: 20px;">{{ driverDetail.name }}</div>
                    <img :src="driverDetail.path" style="width: 290%; margin-left: -150px;" />
                </el-card>
            </div>
            <!-- 个人信息 -->
            <div class="introduce border">
                <div style=" position: relative;top: -20px;left: -102px">
                    <div style="color: #fff;font-weight: 800;">档案</div>
                    <!-- 档案内容 -->
                    <div class="files">

                        <h5 style="border-bottom: 1px solid #0099ff;">身高/体重
                            <div style="margin-left: 20px;display: inline;">
                                {{ driverDetail.height }}cm/{{ driverDetail.weight }}KG
                            </div>
                        </h5>
                        <h5 style="border-bottom: 1px solid #0099ff;">生日
                            <div style="margin-left: 20px;display: inline;">
                                {{ driverDetail.birth }}
                            </div>
                        </h5>
                        <h5 style="border-bottom: 1px solid #0099ff;">性别
                            <div style="margin-left: 20px;display: inline;">
                                {{ driverDetail.gender }}
                            </div>
                        </h5>
                        <h5 style="border-bottom: 1px solid #0099ff;">身份
                            <div style="margin-left: 20px;display: inline;">
                                {{ driverDetail.role }}
                            </div>
                        </h5>
                        <h5 style="border-bottom: 1px solid #0099ff;">专属机甲
                            <div class="mecha-class" @click="router.push('/mecha/detail/' + driverDetail.mechaId)">
                                {{ driverDetail.mecha }}
                            </div>
                        </h5>
                        <h5 style="border-bottom: 1px solid #0099ff;">CV
                            <div style="margin-left: 20px;display: inline;">
                                {{ driverDetail.cv }}
                            </div>
                        </h5>

                    </div>
                </div>

            </div>
        </div>
        <!-- 档案 -->
        <div class="archives border" v-show="route.params.id != 9">
            <div class="inner">
                <div style="color: #fff;font-weight: 800;margin-bottom: 20px;">档案</div>
                <div class="demo-image" style="margin-left: 100px;">
                    <div class="block">
                        <el-button class="custom-button m-2" @click="visible1 = true">基础情报</el-button>
                    </div>
                </div>
                <el-dialog v-model="visible1" width="800">
                    <div v-html="driverArchives.basics" class="my-dialog"></div>
                </el-dialog>
                <div class="demo-image">
                    <div class="block">
                        <el-button class="custom-button m-2" @click="visible2 = true">进阶情报-1</el-button>
                    </div>
                </div>
                <el-dialog v-model="visible2" width="800">
                    <div v-html="driverArchives.advancedf" class="my-dialog"></div>
                </el-dialog>
                <div class="demo-image">
                    <div class="block">
                        <el-button class="custom-button m-2" @click="visible3 = true">进阶情报-2</el-button>
                    </div>
                </div>
                <el-dialog v-model="visible3" width="800">
                    <div v-html="driverArchives.advanceds" class="my-dialog"></div>
                </el-dialog>
                <div class="demo-image">
                    <div class="block">
                        <el-button class="custom-button m-2" @click="visible4 = true">进阶情报-3</el-button>
                    </div>
                </div>
                <el-dialog v-model="visible4" width="800">
                    <div v-html="driverArchives.advancedt" class="my-dialog"></div>
                </el-dialog>


            </div>
        </div>
        <!-- 技能 -->
        <div class="skill border" v-show="route.params.id != 9 && route.params.id != 28">
            <div class="inner">
                <div style="color: #fff;font-weight: 800;margin-bottom: 20px;">技能</div>
                <!-- 驾驶员技能 -->
                <!-- <div class="demo-image" style="margin-left: 100px;">
                    <div class="block">
                        <el-image :src="driverSkill.dskillPic" @click="visible5 = true" />
                        <h3 v-html="driverSkill.dskillName" class="skill-name"></h3>
                    </div>
                </div>
                <el-dialog v-model="visible5" width="800">
                    <div v-html="driverSkill.dskillIntro" class="my-dialog"></div>
                </el-dialog> -->
                <div class="demo-image" style="margin-left: 100px; position: relative;">
                    <div class="block">
                        <el-image :src="driverSkill.dskillPic" @mouseover="showIntro1 = true"
                            @mouseleave="showIntro1 = false" style="width: 80px; height: 80px;" />
                        <h3 v-html="driverSkill.dskillName" class="skill-name"></h3>
                        <div v-if="showIntro1" class="intro-overlay">
                            <div v-html="driverSkill.dskillIntro" class="my-dialog"></div>
                        </div>
                    </div>
                </div>
                <!-- 机甲技能 -->
                <!-- <div class="demo-image">
                    <div class="block">
                        <el-image :src="driverSkill.mskillPic" @click="visible6 = true" />
                        <h3 v-html="driverSkill.mskillName" class="skill-name"></h3>
                    </div>
                </div>
                <el-dialog v-model="visible6" width="800">
                    <div v-html="driverSkill.mskillIntro" class="my-dialog"></div>
                </el-dialog> -->
                <div class="demo-image" style="margin-left: 100px; position: relative;">
                    <div class="block">
                        <el-image :src="driverSkill.mskillPic" @mouseover="showIntro2 = true"
                            @mouseleave="showIntro2 = false" style="width: 80px; height: 80px;" />
                        <h3 v-html="driverSkill.mskillName" class="skill-name"></h3>
                        <div v-if="showIntro2" class="intro-overlay">
                            <div v-html="driverSkill.mskillIntro" class="my-dialog"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<style lang="scss" scoped>
.box {
    background: url(@/assets/bg.jpg) no-repeat 0 0 / cover;
    /* background-size: cover; */
}

.border {
    margin-top: 20px;
    border: 15px solid transparent;
    border-width: 51px 38px 20px 132px;
    border-image-source: url(@/assets/border.png);
    border-image-slice: 51 38 20 132;
}

h5 {
    color: #fff
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

// 个人信息
.introduce {
    position: relative;
    margin-left: 500px;
    width: 200px;

    .files {
        width: 250px;

        .mecha-class {
            cursor: pointer;
            margin-left: 20px;
            display: inline;
            font-style: italic;
            font-weight: 500;
        }

        .mecha-class:hover {
            color: #66ccff
        }
    }
}

// 档案
.archives {
    .inner {
        position: relative;
        top: -20px;
        left: -102px;
        // background-color: red;
        display: flex;
        flex-direction: row;
    }

    .demo-image .block {
        padding: 50px 0;
        margin-right: 65px;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        //   display: inline-block;
        width: 20%;
        box-sizing: border-box;
        vertical-align: top;

        .custom-button {
            background-color: #4A90E2;
            /* 按钮背景色 */
            color: white;
            /* 字体颜色 */
            border-radius: 8px;
            /* 圆角 */
            padding: 10px 20px;
            /* 内边距 */
            font-weight: bold;
            /* 字体加粗 */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            /* 添加阴影效果 */
            border: none;
            /* 去掉边框 */
            transition: background-color 0.3s ease;
            /* 鼠标悬停时背景颜色过渡 */
        }

        .custom-button:hover {
            background-color: #357ABD;
            /* 悬停时按钮背景颜色 */
        }

    }

    .demo-image .block:last-child {
        border-right: none;
    }

    .my-dialog {
        // padding: 10px;
        // font-weight: bold;
        // font-size: 16px;
        background-color: #f9f9f9;
        /* 背景颜色 */
        padding: 20px;
        /* 内边距 */
        border-radius: 10px;
        /* 圆角 */
        border: 1px solid #ddd;
        /* 边框 */
        font-size: 16px;
        /* 字体大小 */
        line-height: 1.8;
        /* 行高 */
        font-family: "Arial", sans-serif;
        /* 字体 */
        color: #333;
        /* 文字颜色 */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        max-width: 600px;
        /* 最大宽度 */
        margin: 20px auto;
        /* 居中显示 */
    }



}

// 技能
.skill {

    .inner {
        position: relative;
        top: -20px;
        left: -102px;
        // background-color: red;
        display: flex;
        flex-direction: row;
    }

    .demo-image .block {
        // padding: 50px 0;
        // margin-right: 65px;
        // text-align: center;
        // border-right: solid 1px var(--el-border-color);
        // //   display: inline-block;
        // width: 20%;
        // box-sizing: border-box;
        // vertical-align: top;
        // width: 28%;
        padding: 20px 0;

        .intro-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            /* 半透明黑色背景 */
            color: white;
            // padding: 20px;
            box-sizing: border-box;
            z-index: 10;
        }
    }

    .demo-image .block:last-child {
        border-right: none;
    }

    .skill-name {
        font-size: 18px;
        font-weight: bold;
        margin: 0 2px;
        // margin-bottom: 10px;
        color: #fff;
        width: 100px;
    }

    .my-dialog {
        background-color: #f9f9f9;
        /* 背景颜色 */
        padding: 20px;
        /* 内边距 */
        border-radius: 10px;
        /* 圆角 */
        border: 1px solid #ddd;
        /* 边框 */
        font-size: 16px;
        /* 字体大小 */
        line-height: 1.8;
        /* 行高 */
        font-family: "Arial", sans-serif;
        /* 字体 */
        color: #333;
        /* 文字颜色 */
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
        max-width: 600px;
        /* 最大宽度 */
        margin: 20px auto;
        /* 居中显示 */
    }

}
</style>